<script setup>
import { Descriptions, DescriptionsItem, TabPane, Table, Tabs, Tag } from 'ant-design-vue';

defineProps({
  curveData: {
    type: Object,
    required: true
  },
  curveName: {
    type: String,
    required: true
  }
});

// 格式化日期
const formatDate = dateStr => {
  if (!dateStr) return '-';
  try {
    const date = new Date(dateStr);
    return date.toLocaleDateString('zh-CN');
  } catch {
    return dateStr;
  }
};

// 表格列定义
const rateColumns = [
  {
    title: '期限(天)',
    dataIndex: 'term',
    key: 'term',
    width: 100,
    sorter: (a, b) => a.term - b.term
  },
  {
    title: '开始日期',
    dataIndex: 'startDate',
    key: 'startDate',
    width: 120,
    customRender: ({ text }) => formatDate(text)
  },
  {
    title: '结束日期',
    dataIndex: 'endDate',
    key: 'endDate',
    width: 120,
    customRender: ({ text }) => formatDate(text)
  },
  {
    title: '基准日期',
    dataIndex: 'horizonDate',
    key: 'horizonDate',
    width: 120,
    customRender: ({ text }) => formatDate(text)
  },
  {
    title: '基点',
    dataIndex: 'basis',
    key: 'basis',
    width: 100,
    customRender: ({ text }) => (text !== null && text !== undefined ? text : '-')
  }
];
</script>

<template>
  <div class="curve-detail">
    <!-- 曲线基本信息 -->
    <Descriptions title="曲线信息" :column="3" size="small" style="margin-bottom: 16px">
      <DescriptionsItem label="曲线名称">
        <Tag color="blue">{{ curveData.mid.curveName }}</Tag>
      </DescriptionsItem>
      <DescriptionsItem label="货币">
        <Tag color="green">{{ curveData.mid.currency }}</Tag>
      </DescriptionsItem>
      <DescriptionsItem label="数据点数量">
        {{ curveData.mid.rateList.length }}
      </DescriptionsItem>
    </Descriptions>

    <!-- 利率数据表格 -->
    <Tabs type="line" size="small">
      <TabPane key="mid" tab="中间价">
        <Table
          :columns="rateColumns"
          :data-source="curveData.mid.rateList"
          :pagination="false"
          size="small"
          :scroll="{ x: 600 }"
        />
      </TabPane>
      <TabPane key="bid" tab="买入价">
        <Table
          :columns="rateColumns"
          :data-source="curveData.bid.rateList"
          :pagination="false"
          size="small"
          :scroll="{ x: 600 }"
        />
      </TabPane>
      <TabPane key="ask" tab="卖出价">
        <Table
          :columns="rateColumns"
          :data-source="curveData.ask.rateList"
          :pagination="false"
          size="small"
          :scroll="{ x: 600 }"
        />
      </TabPane>
    </Tabs>
  </div>
</template>

<style scoped>
.curve-detail {
  padding: 8px 0;
}
</style>
